<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>全局注册</title>
        <style>
            code { border: 1px solid #d1d1d1; background: #f0f0f0; }
        </style>
    </head>
    <body>

        <h3>定义、注册、使用组件( vue.js 2.x )</h3>
        <ol>
            <li>定义组件: 像根组件一样可以拥有data、methods等选项，但必须指定template(或用函数替代)</li>
            <li>注册组件: Vue.component( name , definition )</li>
            <li>使用组件: 将已经全局注册的组件像标签一样使用即可，比如<code>&lt;counter&gt;&lt;/counter&gt;</code></li>
        </ol>
        

        <div id="root">
            <!-- 3、使用组件 -->
            <counter></counter>
            <counter></counter>
            <counter></counter>
        </div>

        <!-- 导入 vue.js 2.x -->
        <script src="../scripts/vue@2.6.14.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            // 1、定义组件
            const counter = {
                // 指定组件的模板
                template: `<p>
                                <button @click="handle">{{ value }}</button>
                           </p>`,
                // 指定组件的数据
                data(){
                    return { value: 1 }
                },
                // 指定组件的方法
                methods: {
                    handle(){
                        this.value++;
                    }
                }
            }

            // 2、注册组件(全局注册: 通过 Vue类 来注册 )
            Vue.component( 'counter' , counter );

            // 根组件配置
            const rootOptions = {
                el: '#root',
                data:{
                    name: 'root' 
                }
            }
            const root = new Vue(rootOptions);
        </script>

    </body>
</html>